<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高校宿舍管理系统-留言板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui/css/public.css" media="all">
    <link rel="stylesheet" href="../layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link href='http://fonts.googleapis.com/css?family=Mr+Bedfort|Eater' rel='stylesheet' type='text/css'/>
    <style type="text/css">
        body {
            font-family: Arial, Sans-Serif;
            font-size: 100%;
        }

        .msgContent {
            margin: 3em 5em;
        }

        h3, p {
            font-size: 100%;
            font-weight: normal;
        }

        ul, li {
            list-style: none;
        }

        ul {
            padding: 3em;
            font-size: 0;
        }

        ul li {
            display: inline-block;
            zoom: 1;
            margin: 1em 3em 5em 1em;
            font-size: 16px;
        }

        ul a {
            /*使用box-shadow制作阴影效果*/
            -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
            -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
            box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
            /*使用transform中的rotate制作旋转效果*/
            -webkit-transform: rotate(-6deg);
            -o-transform: rotate(-6deg);
            -moz-transform: rotate(-6deg);
            -ms-transform: rotate(-6deg);
            transform: rotate(-6deg);
            /*使用transition让transform属性变化更具生动性*/
            -moz-transition: -moz-transform .15s linear;
            -webkit-transition: -webkit-transform .15s linear;
            -o-transition: -o-transform .15s linear;
            -ms-transition: -ms-transform .15s linear;
            transition: transform .15s linear;
            /*为后面的胶纸效果设定一个参照值*/
            position: relative;
            /*实现一个四方形的标签纸效果*/
            display: inline-block;
            height: 15em;
            width: 15em;
            font-size: 100%;
            text-decoration: none;
            color: #000;
            background-color: #ffc;
            padding: 1em;
        }

        ul a:before {
            content: '';
            position: absolute;
            top: -20px;
            left: 20%;
            width: 110px;
            height: 40px;
            background-color: rgba(255, 255, 204, 0.5);
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
        }

        ul p {
            font-family: 'Droid Sans', serif;
            font-size: 120%;
            line-height: 30px;
        }

        ul h3 {
            font-family: 'Eater', cursive;
            font-size: 140%;
            font-weight: bold;
            padding-bottom: 10px;
            padding-top: 5px;
            text-align: center;
        }

        ul span {
            display: inline-block;
            padding-top: 20px;
            padding-left: 80px;
        }

        /*给第2，4，6，8...2n处的标签改变旋转值和背景色*/
        /*ul li:nth-child(even) a*/
        .gg {
            -webkit-transform: rotate(4deg);
            -o-transform: rotate(4deg);
            -moz-transform: rotate(4deg);
            -ms-transform: rotate(4deg);
            transform: rotate(4deg);
            position: relative;
            top: 5px;
            background-color: #cfc;
        }

        /*给第3，6，9...3n处的标签改变旋转值和背景色*/
        /* ul li:nth-child(3n) a*/
        .swzl {
            -webkit-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
            position: relative;
            top: -5px;
            background-color: #ccf;
        }

        /*给第5,10,15...5n处的标签改变旋转值和背景色*/
        /* ul li:nth-child(5n) a*/
        .ptly {
            -webkit-transform: rotate(5deg);
            -o-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            transform: rotate(5deg);
            position: relative;
            top: -10px;
        }

        /*改变对应的胶纸色*/
        /*ul li:nth-child(even) a:*/
        .gg:before {
            background-color: rgba(204, 255, 204, 0.5);
        }

        /* ul li:nth-child(3n) a */
        .swzl:before {
            background-color: rgba(204, 204, 255, 0.5);
        }

        ul li a:hover,
        ul li a:focus {
            /*改变阴影效果*/
            -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
            -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
            box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
            /*使用transform中的scale将便签纸放大*/
            -moz-transform: scale(1.25);
            -webkit-transform: scale(1.25);
            -o-transform: scale(1.25);
            -ms-transform: scale(1.25);
            transform: scale(1.25);
            position: relative;
            z-index: 5;
        }

        .layui-laypage input {
            margin: -1px 10px;
        }

        .layui-laypage .layui-laypage-skip {
            color: black;
        }

        .pagefenye {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-inline">
                            <select name="type" id="type" class="layui-input">
                                <option value="3" selected>全部</option>
                                <option value="0">公告</option>
                                <option value="1">失物招领</option>
                                <option value="2">普通留言</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="search" class="layui-btn">
                            <i class="layui-icon"></i>查 询
                        </button>
                    </div>
                </div>
            </form>
        </div>


        <div class="msgContent">
            <ul id="msgul"></ul>
        </div>
        <div id="pagefenye" class="pagefenye"></div>
    </div>
</div>
<script src="../layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['laypage', 'layer'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage,
            layer = layui.layer;

        $(function () {
            getMessageList(1);// 初始化页面
        });

        $("#search").on("click", function () {
            getMessageList(1);
            return false;
        })

        function getMessageList(curr) {
            var type = $("#type").val();
            console.log(type);
            $.ajax({
                url: "/student/message/list",
                type: "post",
                data: {
                    "curr": curr || 1,
                    "type": type,
                    "limit": 6,
                    "type": type
                },
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        $("#msgul").empty();
                        var count = result.count;
                        var curr = result.curr;
                        var limit = result.limit;
                        getPageList(count, curr, limit);
                        var data = result.data;
                        console.log(data);
                        $.each(data, function (i, item) {
                            var classSty;
                            switch (item.type) {
                                case 0:
                                    classSty = "gg"
                                    break;
                                case 1:
                                    classSty = "swzl"
                                    break;
                                case 2:
                                    classSty = "ptly";
                                    break;
                            }
                            var newMsgHTML = '<li>\n' +
                                '                    <a class="' + classSty + '">\n' +
                                '                        <h3>' + item.title + '</h3>\n' +
                                '                        <p>' + item.content + '</p>\n' +
                                '                        <span>' + item.time + '</span>\n' +
                                '                    </a>\n' +
                                '                </li>';
                            $("#msgul").append(newMsgHTML);
                        });
                    } else {
                        layer.msg(result.msg, {icon: 1});
                    }
                },
                error: function () {
                    layer.msg("网络故障！", {icon: 1});
                }
            });
        }

        //自己封装分页方法
        function getPageList(count, curr, limit) {
            //完整功能
            laypage.render({
                elem: 'pagefenye',
                count: count || 0,
                theme: '#009587',
                limit: limit || 6,
                limits: [6, 12, 24, 36, 48],
                curr: curr || 1,
                layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        getMessageList(obj.curr);
                    }
                }
            });
        }
    });
</script>

</body>
</html>